<template>
  <div class="box">
    <h2>子组件 add --- {{ count }}</h2>
    从vuex中获取的值: {{ count }}<label></label>
    <br />
    <button @click="add">值+1</button>
    <button @click="asyncAdd">延时1s值+1</button>
    <button @click="$store.dispatch('asyncChangeCount', 100)">延时1s值改成100</button>
    <button @click="asyncChangeCount(1000)">延时1s值改成1000</button>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex"
export default {
  name: 'AddItem',
  computed: {
    // 计算属性
    // count() {
    //   return this.$store.state.count
    // }
    // 这里就是帮我们简写了计算属性, 所以被称为辅助函数
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['asyncChangeCount']),
    add() {
      // 此处触发 incremCount 方法
      // this.$store.commit(mutations 的名字)
      this.$store.commit('incremCount')
    },
    asyncAdd() {
      // this.$store.commit('asyncInceem')
      // 调用 actions 中的异步方法
      this.$store.dispatch('asyncInceem')
    }
  }
}
</script>

<style lang="css" scoped>
.box {
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>